<template>
  <view class="center-container">
    <view class="header">
      <text class="title">个人中心</text>
    </view>

    <view class="user-info-section">
      <view class="avatar">
        <image :src="userInfo.avatar || '/static/logo.png'" mode="aspectFill"></image>
      </view>
      <view class="user-details">
        <text class="username">{{ userInfo.nickname || '未设置昵称' }}</text>
        <view class="basic-info">
          <text class="info-item">
            性别：{{ userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '未设置' }}
          </text>
          <text class="info-item">
            出生年份：{{ userInfo.birthYear || '未设置' }}
          </text>
          <text class="info-item">
            所在地址：{{ userInfo.address || '未设置' }}
          </text>
        </view>
      </view>
    </view>

    <view class="action-buttons">
      <button class="edit-btn" @tap="goToProfile">编辑资料</button>
      <button class="logout-btn" @tap="logout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow,onLoad } from '@dcloudio/uni-app';

const userInfo = ref({});

// 页面加载时获取用户信息
onLoad(() => {
  loadUserInfo();
});

// 页面显示时重新加载用户信息（确保显示最新保存的数据）
onShow(() => {
  loadUserInfo();
});

// 加载用户信息
const loadUserInfo = () => {
  const storedUserInfo = uni.getStorageSync('userInfo') || {};
  userInfo.value = storedUserInfo;
};

// 跳转到编辑资料页面
const goToProfile = () => {
  uni.navigateTo({
    url: '/pages/profile/profile'
  });
};

// 退出登录
const logout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除本地存储的用户信息
        uni.removeStorageSync('userInfo');
        // 跳转到登录页
        uni.redirectTo({
          url: '/pages/index/index'
        });
      }
    }
  });
};
</script>

<style scoped>
.center-container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 44rpx;
  font-weight: bold;
  color: #333;
}

.user-info-section {
  background-color: white;
  padding: 40rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 30rpx;
  border: 4rpx solid #f0f0f0;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.user-details {
  text-align: center;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.basic-info {
  margin-top: 30rpx;
}

.info-item {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  line-height: 40rpx;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 40rpx;
}

.edit-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  background-color: #6d4aff;
  color: white;
  border-radius: 50rpx;
}

.logout-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  background-color: #fff;
  color: #666;
  border: 1rpx solid #ddd;
  border-radius: 50rpx;
}
</style>